<template>
    <el-dialog v-model="fromParam.modal" title="选择图标" width="580">
        <div class="search">
            <el-input v-model="filterText" placeholder="选择图标">
                <template #prefix>
                    <el-icon class="material-icons">search</el-icon>
                </template>
            </el-input>
        </div>
        <div class="icons">
            <div class="icons-warp">
                <div class="icons-content">
                    <template v-if="filterText.length > 0">
                        <span v-for="(item, index) in filterIcons" :key="index" class="icon"
                            @click="SelectIcon(item.value)">
                            <el-icon :class="item.class" size="36">{{ item.value }}</el-icon>
                            <p>{{ item.name }}</p>
                        </span>
                    </template>
                    <template v-else>
                        <span v-for="(item, index) in data" :key="index" class="icon" @click="SelectIcon(item.value)">
                            <el-icon :class="item.class" size="36">{{ item.value }}</el-icon>
                            <p>{{ item.name }}</p>
                        </span>
                    </template>
                </div>
            </div>
        </div>
    </el-dialog>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue';
import { PermessionMenu } from './Def';
import materialIcons from '@/base/icons'


const props = defineProps<{
    fromParam: PermessionMenu.SelectIconDialog,
    params: PermessionMenu.FormState
}>()

const filterText = ref("");
const data = ref(materialIcons)

const filterIcons = computed(() =>
    data.value.filter((item) => filterText.value == item.value)
);

const SelectIcon = (value: string) => {
    props.fromParam.modal = false;
    props.params.Icon = value;
};


</script>

<style lang="scss" scoped>
.search {
    margin: 20px 0 20px 0;
}

.icons {
    &-warp {
        height: 300px;
        overflow: hidden;

        .icons-content {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            overflow-x: hidden;
            overflow: auto;
            height: 100%;

            .icon {
                width: 82px;
                height: 72px;
                text-align: center;
                align-items: center;
                color: #888;
                margin-top: 16px;
                cursor: pointer;
                border-radius: 3px;
                border: 1px solid transparent;

                &:hover {
                    border-color: #66b1ff;
                    transition: 0.5s ease-in-out;
                }

                p {
                    width: 100%;
                    overflow: hidden;
                    margin: 0;
                    color: #666;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
            }
        }
    }
}
</style>